<template>
<div>
  <p>名字：<input type="text" v-model="from.name"></p>
  <p>年龄：<input type="text" v-model="from.age"></p>
  <p>性别：<input type="text" v-model="from.gender"></p>
  <p>参演的电影：<select v-model="from.movie">
    <option v-for="i in movies" :value="i.id">{{i.name}}</option>
  </select></p>
  <button @click="add">添加</button>
  <br>
  <br>
  <br>
  <table border="1" align="center">
    <tr>
      <td>演员名字</td>
      <td>演员年龄</td>
      <td>演员性别</td>
    </tr>
    <tr v-for="i in actor">
      <td>{{i.name}}</td>
      <td>{{i.age}}</td>
      <td>{{i.gender}}</td>
    </tr>
  </table>
</div>
</template>

<script>
export default {
  name: "actor",
  data(){
    return{
      from:{},
      movies:[],
      actor:[]
    }
  },
  methods:{
    get_movie(){
      this.$axios.get('users/movie/')
      .then(res=>{
        if (res.data.code==200){
          this.movies = res.data.list
        }
      })
    },
    add(){
      this.$axios.post('users/actor/',this.from)
      .then(res=>{
        if(res.data.code==200){
          alert('添加成功')
        }else {
          alert('添加失败')
        }
      })
    },
    get_actor(){
      this.$axios.get('users/actor/')
      .then(res=>{
        if(res.data.code==200){
          this.actor=res.data.list
        }
      })
    }
  },
  mounted() {
    this.get_movie()
    this.get_actor()
  }
}
</script>

<style scoped>

</style>
